<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" title="商品详情" :bgColor="'rgba(255, 255, 255, '+opacityVal+')'" @rightClick="shareGoods">
      <!-- <image slot="right" style="width: 36rpx;height: 34.11rpx;" src="../../static/share.png" /> -->
    </u-navbar>
    <u-swiper :list="bannerList" indicatorStyle="right: 20px;bottom: 132rpx;" @change="e => bannerCurrent = e.current" bgColor="#fff" height="892rpx" keyName="url">
      <view slot="indicator" class="indicator-num">
        <text class="indicator-num__text">{{ bannerCurrent + 1 }}/{{ bannerList.length }}</text>
      </view>
    </u-swiper>
    <view class="goods-info">
      <view class="goods-name">
        <text class="new-img"><image src="../../static/goods/new.png" /></text>
        <text class="text">{{ goodsForm.title }}</text>
      </view>
      <view class="u-flex u-row-between u-col-bottom">
        <view class="price"><text>¥</text> {{ (goodsForm.priceCents / 100).toFixed(2) }}</view>
        <view class="price"></view>
        <view class="u-font-24">仅剩{{ goodsForm.totalInventory }}件</view>
      </view>
    </view>
    <view class="goods-detail">
      <view class="u-flex u-m-b-12">
        <view class="u-m-r-2" style="width: 8rpx;height: 32rpx;background: #53BE07;"></view>
        <view class="u-m-r-12" style="width: 2rpx;height: 32rpx;background: #53BE07;"></view>
        <view class="u-font-28">商品详情</view>
      </view>
      <view class="ql-editor" v-html="goodsForm.description"></view>
    </view>
    <view class="goods-actions" :style="isFullSucreen? 'padding-bottom: 30px;' : '' ">
      <view class="u-flex">
        <view class="u-text-center u-m-r-40" @click="collect">
          <image style="width: 38rpx;height: 36rpx;" v-if="this.goodsForm.isCollected=='0'" src="../../static/goods/noCollect.png" />
          <image style="width: 38rpx;height: 36rpx;" v-if="this.goodsForm.isCollected=='1'" src="../../static/goods/collect.png" />
          <view class="u-font-24">{{ this.goodsForm.isCollected=='0'?'未收藏':'已收藏' }}</view>
        </view>
        <view class="u-text-center" style="position: relative" @click="jumpTab('/pages/gwc/gwc')">
          <u-badge absolute max="99" :value="badge" :offset="[0, 0]" bgColor="#E20300" style="z-index: 1;"></u-badge>
          <image style="width: 44rpx;height: 40.33rpx;" src="../../static/goods/gwc.png" />
          <view class="u-font-24">购物车</view>
        </view>
      </view>
      <view class="u-flex">
        <view class="btn u-m-r-12" @click="showSpecFn(1)">加入购物车</view>
        <view class="btn" style="background: #56CB03;color: #fff;" @click="showSpecFn(0)">立即购买</view>
        <!-- <view class="btn" style="background: #56CB03;color: #fff;width: 488rpx;" @click="showSpecPopup=true">加入购物车</view> -->
      </view>
    </view>
    <specPopup v-if="showSpecPopup" :closePopup="closePopup" :showSpecPopup="showSpecPopup" :type="type" :goodsForm="goodsForm" :goodsSpecList="goodsSpecList" />
  </view>
</template>

<script>
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import specPopup from '../../components/specPopup.vue'
import { getProductsForm, getGoodsMediaList, getGoodsSpecList, collectGoods, delCollectGoods } from '@/api/index'
import { getCarCount } from '@/api/index'
import { wxShare } from '@/common/util'

export default {
  components: {
    specPopup,
  },
  data() {
    return {
      badge: 0,
      id: '',
      isFullSucreen: this.isFullSucreen,
      opacityVal: 0,
      bannerCurrent: 0,
      bannerList: [],
      showSpecPopup: false,
      goodsForm: {
        priceCents: 0,
      },
      goodsSpecList: [],
      type: 0,
    };
  },
  async onLoad(options) {
    if(options.invitationCode) {
      uni.setStorageSync('invitationCode', options.invitationCode)
    }
    this.getCarNum()
    this.id = options.id
    uni.showLoading({ mask: true })
    await this.getForm()
    // await this.getGoodsMedia()
    // await this.getGoodsSpec()
    uni.hideLoading()
  },
  methods: {
    closePopup() {
      this.getCarNum()
      this.showSpecPopup = false
    },
    getCarNum() {
      getCarCount({}).then(res => {
        this.badge = res.data
      })
    },
    shareGoods() {
      const userInfo = uni.getStorageSync('userInfo')
      const shareInfo = {
        title: this.goodsForm.title,
        link: this.httpUrl + '/pages/goodsDetail/goodsDetail?id=' + this.id,
        url: window.location.href,
        imgUrl: this.goodsForm.subtitle.split(',')[0],
      }
      shareInfo.link = shareInfo.link + '&invitationCode=' + userInfo.invitationCode
      wxShare(shareInfo)
    },
    collect() {
      uni.showLoading({ mask: true })
      if(this.goodsForm.isCollected == '1') {
        delCollectGoods({ userId: uni.getStorageSync('userInfo').userId, productId: this.id }).then(res => {
          uni.hideLoading()
          uni.showToast({
            title: '取消收藏成功',
            icon: 'none',
            mask: true
          })
          this.getForm()
        })
      } else if(this.goodsForm.isCollected == '0') {
        collectGoods({ userId: uni.getStorageSync('userInfo').userId, productId: this.id }).then(res => {
          uni.hideLoading()
          uni.showToast({
            title: '收藏成功',
            icon: 'none',
            mask: true
          })
          this.getForm()
        })
      }
    },
    showSpecFn(type) {
      if(this.goodsSpecList.length == 0) {
        uni.showToast({
          title: '暂无商品规格',
          icon: 'none',
          mask: true
        })
        return
      }
      this.type = type
      const that = this
      this.$nextTick(() => {
        that.showSpecPopup = true
      })
    },
    async getForm() {
      await getProductsForm({id: this.id, userId: uni.getStorageSync('userInfo').userId}).then(res => {
        this.goodsForm = res.data
        document.title = res.data.title
        if(res.data.specifications.length) {
          this.goodsForm.priceCents = res.data.specifications[0].priceCents ? +res.data.specifications[0].priceCents : 0
        }
        this.goodsSpecList = res.data.specifications
        this.bannerList = res.data.subtitle.split(',')
        this.shareGoods()
      })
    },
    async getGoodsMedia() {
      await getGoodsMediaList({productId: this.id}).then(res => {
        if(res.rows.length) {
          this.bannerList = res.rows
        }
      })
    },
    async getGoodsSpec() {
      await getGoodsSpecList({productId: this.id}).then(res => {
        this.goodsSpecList = res.rows
      })
    },
  },
  onPageScroll(e) {
    const scrollThreshold = 200
    const scrollTop = e.scrollTop;
    if (scrollTop <= 0) return this.opacityVal = 0; // 滚动到顶部时透明度为0
		if (scrollTop >= scrollThreshold) return this.opacityVal = 1; // 超过阈值时透明度为1
		return this.opacityVal = (scrollTop / scrollThreshold).toFixed(1); // 线性计算透明度
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 280rpx;
  position: relative;
  .indicator-num {
    padding: 2px 0;
    background: rgba(0,0,0,0.5);
    border-radius: 200rpx;
    width: 80rpx;
    text-align: center;

    &__text {
      color: #ffffff;
      font-size: 24rpx;
    }
  }
  .goods-info {
    width: 702rpx;
    background: #FFFFFF;
    box-shadow: 4rpx 4rpx 4rpx 0rpx rgba(215,215,215,0.25);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    margin: 0 auto;
    margin-top: -112rpx;
    margin-bottom: 20rpx;
    position: relative;
    padding: 22rpx 28rpx;
    .goods-name {
      margin-bottom: 16rpx;
      .new-img {
        vertical-align: middle; /* 文字基线上对齐 */
        display: inline-flex;
        align-items: center;
        height: 44rpx;
        image {
          width: 44rpx;
          height: 44rpx;
        }
      }
      .text {
        font-size: 28rpx;
        color: #000000;
        line-height: 56rpx;
      }
    }
    .price {
      height: 72rpx;
      font-weight: 500;
      font-size: 48rpx;
      color: #E20300;
      text {
        font-size: 36rpx;
      }
    }
  }
  .goods-detail {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 22rpx 20rpx;
    margin: 0 auto;
  }
  .goods-actions {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 104rpx;
    padding: 12rpx 24rpx;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(16rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      width: 238rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 200rpx;
      border: 2rpx solid #56CB03;
      font-weight: 500;
      font-size: 28rpx;
      color: #56CB03;
    }
  }
}
</style>
